<template>
  <div class="order_mian">
    <div class="order_row">
      <div class="order_wrap">
        <div class="order_table">
          <el-form
            :inline="true"
            size="mini"
            label-width="100px"
            ref="ruleForm1"
            :model="queryParams"
            class="demo-form-inline"
          >
            <el-form-item label="展馆号" prop="exNumber">
              <el-input
                v-model="queryParams.exNumber"
                placeholder="请输入展馆号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="展位号" prop="standNum">
              <el-input
                v-model="queryParams.standNum"
                placeholder="请输入展位号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="审核状态" prop="applyStatus">
              <el-select
                v-model="queryParams.applyStatus"
                placeholder="请选择审核状态"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in dict.type.apply_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="报馆进度" prop="applyStep">
              <el-select
                v-model="queryParams.applyStep"
                placeholder="请选择报馆进度"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in dict.type.ex_apply_step"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label=" ">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="order_table">

          <div class="box_add">
            <div class="box-row">
              <el-button  @click="openDialog" class="box_but_text" type="text" icon="el-icon-plus">点击添加展位</el-button>
            </div>

          </div>

          <div class="box-card" v-for="item in tableData" :key="item.id">
            <div class="box-mian">
              <div class="box-row">
                <div class="box_right">
                  <div class="box_row_left">
                    <div class="box_row_left_text">展馆号</div>
                    <div class="box_row_left_text">展位号</div>
                    <div class="box_row_left_text">展位名称</div>
                  </div>
                  <div class="box_row_right">
                    <div>{{ item.exNumber }}</div>
                    <div>{{ item.standNum }}</div>
                    <div>{{ item.standName }}</div>
                  </div>
                </div>
              </div>

              <div class="box-row">
              
                <div class="box_cent_row">
                  <div class="cet_img">
                    <img v-if="item.checkCommonVo.stage == 0 || item.checkCommonVo.status == 1" src="../../../static/images/svg/icon5.svg" />
                    <img v-if="item.checkCommonVo.status == 0" src="../../../static/images/svg/icon4.svg" />
                    <img v-if="item.checkCommonVo.status == 2" src="../../../static/images/svg/icon6.svg" />
                  </div>
                  <div class="cet_text_row">
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 0">展位添加完成</div>
                    <div class="cet_row_text"  v-if="item.checkCommonVo.stage == 0">请上传报馆资料</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 1 && item.checkCommonVo.status == 1">报馆审核已通过</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 1 && item.checkCommonVo.status == 0">报馆审核待审核</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 1 && item.checkCommonVo.status == 2">报馆审核未通过</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 1">项目申请审核已通过</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 2">项目申请审核未通过</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 0">项目申请待审核</div>
                    <div class="cet_row_text"  v-if="item.checkCommonVo.status == 0">请耐心等待审核，审核结果将由短信通知</div>
                    <div class="cet_row_text"  v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 1">审核已通过，请上传凭证</div>
                    <div class="cet_row_text" v-if="item.checkCommonVo.stage == 1 && item.checkCommonVo.status == 2">审核未通过，请修改后重新上传</div>
                    <div class="cet_row_text"  v-if="item.checkCommonVo.stage == 1 && item.checkCommonVo.status == 1">审核已通过，请进行项目申请</div>
                    <div class="cet_row_text" v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 2">审核未通过，请重新进行项目申请</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 3">上传缴费凭证成功</div>
                    <div class="cet_row_titel" v-if="item.checkCommonVo.stage == 4">发票申请成功</div>
                    <div class="cet_row_text"  v-if="item.checkCommonVo.stage == 3">可进行发票申请</div>
                  </div>
                </div>
              </div>

              <div class="box-row">
                <div class="box_but_row">
                  <div class="box-item-but">
                    <el-button  type="text" @click="hanldpathToBg(item)"
                      >查看详情</el-button
                    >
                  </div>
                  <div class="box-item-but" style="padding-left: 10px">
                    <el-button
                      v-if="
                        item.checkCommonVo.stage == 0 && item.checkCommonVo.status == 4
                      "
                      type="text"
                      @click="toUpdateAttachment(item.id)"
                      >上传资料</el-button
                    >
                    <el-button
                            v-if="
                        item.checkCommonVo.stage == 1 &&
                        item.checkCommonVo.status == 2
                      "
                            type="text"
                            @click="editUpdateAttachment(item.id)"
                    >修改资料</el-button
                    >
                    <el-button
                      v-if="item.checkCommonVo.stage == 1 && item.checkCommonVo.status == 1"
                      type="text"
                      @click="toShopping(item)"
                      >项目申请</el-button
                    >
                    <el-button
                            v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 2"
                            type="text"
                            @click="toShopping(item)"
                    >重新项目申请</el-button
                    >
                    <el-button
                      v-if="item.checkCommonVo.stage == 2 && item.checkCommonVo.status == 1"
                      type="text"
                      @click="toGoOrder(item)"
                      >上传凭证</el-button
                    >
                    <el-button
                      v-if="item.checkCommonVo.stage == 3 && item.checkCommonVo.status == 1"
                      type="text"
                      @click="toInvoiceApply(item)"
                      >发票申请</el-button
                    >
                  </div>
                </div>
              </div>
            </div>

          </div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getdata"
          />
          <!-- 弹窗区域 -->
          <el-dialog
            title="添加展位"
            :visible.sync="dialogVisible"
            width="900px"
            :before-close="handleClose"
            :close-on-click-modal="false"
          >
            <el-form
              label-position="left"
              ref="form"
              :model="form"
              :rules="rules"
              :inline="true"
              label-width="140px"
            >
              <el-form-item
                style="margin-right: 50px"
                label="展馆号:"
                prop="exNumber"
              >
                <el-select
                  style="width: 250px"
                  v-model="form.exNumber"
                  filterable
                  clearable
                  @change="changeExNumber"
                >
                  <el-option
                    v-for="item in exNumber"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- v-model="form.id" -->
              <el-form-item label="展位号 :" prop="id">
                <el-autocomplete
                  clearable
                  style="width: 250px"
                  v-model="state"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="handleSelect"
                  value-key="standNum"
                ></el-autocomplete>
              </el-form-item>

              <el-descriptions
                title="确认展位信息"
                direction="vertical"
                :column="4"
              >
                <el-descriptions-item label="展位类型"
                  ><el-tag size="small" v-if="stan.standType != null">{{
                    stan.standType == "1" ? "特装" : "标展"
                  }}</el-tag></el-descriptions-item
                >
                <el-descriptions-item label="展位名称">{{
                  stan.standName
                }}</el-descriptions-item>
                <el-descriptions-item label="展位面积" :span="2">{{
                  stan.standArea
                }}</el-descriptions-item>
              </el-descriptions>

              <div>
                <div class="form_titel">展位信息填写</div>

                <el-form-item label="展位层数类型:" prop="standLevelType">
                  <el-select
                    style="width: 250px"
                    v-model="form.standLevelType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="dict in dict.type.stand_level_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="展位位置类型:" prop="standPosType">
                  <el-select
                    style="width: 250px"
                    v-model="form.standPosType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dict.type.stand_pos_type"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="展位材质类型:" prop="standTexture">
                  <el-select
                    style="width: 250px"
                    v-model="form.standTexture"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dict.type.stand_texture"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="展台高度:" prop="standHeight">
                  <el-input
                    style="width: 250px"
                    type="number"
                    v-model="form.standHeight"
                    min="0"
                  ></el-input>
                </el-form-item>
                <el-form-item label="是否吊点:" prop="isLiftingpoint">
                  <el-select
                    style="width: 250px"
                    v-model="form.isLiftingpoint"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dict.type.sys_number_yes_no"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <div class="form_titel">搭建商信息填写</div>

                <el-form-item label="社会统一信用代码:" prop="creditCode">
                  <el-input
                    style="width: 250px"
                    v-model="form.creditCode"
                  ></el-input>
                </el-form-item>
                <el-form-item label="施工单位名称:" prop="constructionName">
                  <el-input
                    style="width: 250px"
                    v-model="form.constructionName"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="报馆负责人姓名:"
                  prop="constructionDirector"
                >
                  <el-input
                    style="width: 250px"
                    v-model="form.constructionDirector"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="报馆负责人电话:"
                  prop="constructionDirectorTel"
                >
                  <el-input
                    style="width: 250px"
                    v-model="form.constructionDirectorTel"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="现场负责人姓名:"
                  prop="dutyElectWorkmanName"
                >
                  <el-input
                    style="width: 250px"
                    v-model="form.dutyElectWorkmanName"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="现场负责人电话:"
                  prop="dutyElectWorkmanTel"
                >
                  <el-input
                    style="width: 250px"
                    v-model="form.dutyElectWorkmanTel"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">返 回</el-button>
              <el-button type="primary" @click="hanldadd">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  stand_infolist,
  getStandInfo,
  stand_info,
  zwapply,
  getlist,
  apply,
  genarateCadAttachment,
  getOrganizetionInfo,
} from "@/api/outfit/drawingadd.js";
import { getToken, setToken, removeToken } from "@/utils/auth";
export default {
  dicts: [
    "apply_status",
    "ex_apply_step",
    "stand_level_type",
    "stand_texture",
    "stand_pos_type",
    "sys_number_yes_no",
    "stand_stage",
  ],
  data() {
    return {
      // 远程搜索
      state: "",
      invoiceDialog: false,
      restaurants: [],
      rules: {
        standLevelType: [
          { required: true, message: "请选择展位层数类型", trigger: "change" },
        ],
        standPosType: [
          { required: true, message: "请选择展位位置类型", trigger: "change" },
        ],
        standTexture: [
          { required: true, message: "请选择展位材质类型", trigger: "change" },
        ],
        standHeight: [
          { required: true, message: "请输入展台高度", trigger: "blur" },
        ],
        isLiftingpoint: [
          { required: true, message: "请选择是否吊点", trigger: "change" },
        ],
        standArea: [
          { required: true, message: "请输入展台面积", trigger: "blur" },
        ],
        constructionDirector: [
          { required: true, message: "请输入报馆负责人", trigger: "blur" },
        ],
        constructionName: [
          { required: true, message: "请输入施工单位名称", trigger: "blur" },
        ],
        creditCode: [
          {
            required: true,
            message: "请输入社会统一信用代码",
            trigger: "blur",
          },
          {
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: "请输入正确的社会统一信用代码",
            trigger: "blur",
          },
        ],
        constructionDirectorTel: [
          {
            required: true,
            message: "请输入报馆负责人联系电话",
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        dutyElectWorkmanName: [
          { required: true, message: "请输入报馆负责人姓名", trigger: "blur" },
        ],
        dutyElectWorkmanTel: [
          {
            required: true,
            message: "请输入值守工人联系电话",
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
      dialogVisible: false,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        applyPerson: null,
        exNumber: null,
        applyStatus: null,
        applyStep: null,
        exhibitionId: null,
        standNum: null,
      },
      exNumber: null,
      stan: {},
      form: {
        id: null,
      },
      formdata: {
        exNumber: null,
        exhibitionId: null,
        stage: null, //筛选未报馆展位
        standType: 1, //筛选特装展位
      },
      exhibition: {},
      total: 0,
      constructor: {},
    };
  },
  activated() {
    removeToken("applyid");
    this.queryParams.applyPerson = getToken("username");
    this.getdata();
    this.exhibition = JSON.parse(getToken("exhibition"));
    if (this.exhibition) {
      this.queryParams.exhibitionId = this.exhibition.id;
      if (this.exhibition.exNumber != null) {
        this.exNumber = this.exhibition.exNumber.split(";");
      }
      // if (this.stan == null) {
      //   this.getlist();
      //   this.getshopcar();
      // }
    }
    this.getOrganizetion();
    console.log("exhibitionhhhhhhhh");
    console.log(this.exhibition);
    this.getinputdata();
  },
  methods: {
    getdata() {
      this.exhibition = JSON.parse(getToken("exhibition"));
      this.queryParams.exhibitionId = this.exhibition.id;
      getlist(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    getOrganizetion() {
      getOrganizetionInfo().then((res) => {
        this.constructor = res.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getdata();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("ruleForm1");
      this.handleQuery();
    },
    hanldpathToBg(row) {
      console.log(row);
      this.$router.push({
        path: "/drawingdetail",
        query: {
          id: row.id,
          standId: row.standId,
        },
      });
    },
    toGoOrder(row) {
      // this.$message({
      //   message: "请前往订单中心或查看中缴费",
      //   type: "warning",
      // });
      this.$router.push({
        path: "/orderdetails",
        query: { id: row.orderNum, open: true },
      });
    },
    toShopping(row) {
      this.$router.push({
        path: "/lease",
        query: { standId: row.standId, to: true },
      });
    },
    toInvoiceApply(row) {
      this.$router.push({
        path: "/invoiceIndex",
        query: { standId: row.standId, to: true },
      });
    },
    addStand(row) {
      this.$router.push({
        path: "/drawingadd",
        query: { standId: row.standId },
      });
    },
    handleClose() {
      this.form.standNum = null;
      this.dialogVisible = false;
    },
    openDialog() {
      this.form = {};
      this.form.constructionName = this.constructor.constructionName;
      this.form.creditCode = this.constructor.creditCode;
      this.stan = {};
      this.dialogVisible = true;
    },
    // 获取远程搜索数据
    getinputdata() {
      console.log(this.formdata);
      this.formdata.exhibitionId = this.exhibition.id;
      stand_infolist(this.formdata).then((res) => {
        if (res.code == 200) {
          this.restaurants = res.rows;
        }
      });
    },
    // 数据进行匹配
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      // if (results.length < 1) {
      //   return this.$message.error("用户暂未分配展位");
      // }
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
      // cb(results);
    },
    changeExNumber() {
      this.formdata.exNumber = this.form.exNumber;
      this.form.id = null;
      this.getinputdata();
    },
    handleSelect(val) {
      console.log(val);
      this.form.id = val.id;
      getStandInfo(val.id).then((res) => {
        if (res.code == 200) {
          this.stan = res.data;
          console.log("选择变更");
          console.log(this.stan);
        }
      });
    },
    hanldadd() {
      setToken("stan", JSON.stringify(this.stan));
      let stanId = this.stan.id;
      console.log(stanId);
      let user = JSON.parse(getToken("user"));
      let username = user.userName;
      this.$refs.form.validate((valid) => {
        if (valid) {
          let updateStandForm = {
            id: stanId,
            exProducerId: user.userId,
            standLevelType: this.form.standLevelType,
            standPosType: this.form.standPosType,
            standTexture: this.form.standTexture,
            standHeight: this.form.standHeight,
            isLiftingpoint: this.form.isLiftingpoint,
            constructionDirector: this.form.constructionDirector,
            constructionDirectorTel: this.form.constructionDirectorTel,
            dutyElectWorkmanName: this.form.dutyElectWorkmanName,
            dutyElectWorkmanTel: this.form.dutyElectWorkmanTel,
            exhibitionCompany: username,
            stage: 0,
          };
          getStandInfo(stanId).then((res) => {
            let stan = res.data;
            if (res.code == 200) {
              this.dialogVisible = false;
              //更新展位信息
              stand_info(updateStandForm).then((res) => {
                if (res.code == 200) {
                  console.log("res", res);
                  let formdatalsq = {
                    constructionName: username,
                    standId: stanId,
                    standNum: stan.standNum,
                    standArea: stan.standArea,
                    applyStatus: 4,
                    applyPerson: username,
                    exNumber: stan.exNumber,
                    applyStep: 4,
                  };
                  //新增报馆申请
                  zwapply(formdatalsq).then((res) => {
                    genarateCadAttachment(res.data.id);
                    console.log(res);
                    setToken("applyid", res.data.id);
                    this.getdata();
                  });
                }
              });
            }
          });
        }
      });
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.standNum.indexOf(queryString) >= 0;
      };
    },
    //修改审图
    toUpdateAttachment(id) {
      apply(id).then((res) => {
        setToken("applyid", id);
        setToken("jd", JSON.stringify(res.data));
        setToken("stan", JSON.stringify(res.data.exhibitioinStandInfo));
        setToken("stanId", null);
        this.$router.push({
          path: "/drawingadd",
          query: {
            index: 4,
            applyid: id, //把addlyid传到drawingadd
          },
        });
      });
    },
    editUpdateAttachment(id) {
      this.$router.push({
        path: "/editApply",
        query: {
          index: 4,
          id: id, //把addlyid传到drawingadd
        },
      });
    },
    inputha(val) {
      console.log(val);
    },
  },
};
</script>
<style scoped>
.order_mian {
  background-color: #f2f2f2;
}
.order_row {
  padding: 40px;
}
.order_wrap {
  min-width: 1000px;
  margin: auto;
}
.el-breadcrumb {
  font-size: 18px;
}
.order_table {
  width: 1150px;
  margin: auto;
  background-color: #fff;
  padding: 40px;
  margin-bottom: 30px;
}
/deep/.el-table th.el-table__cell {
  background-color: #f8fcfc !important;
  text-align: center !important;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
.box-card {
  margin-bottom: 10px;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding: 5px;
}
.box_add {
   border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 20px;
}
.box_but_text{
  font-size: 20px;
  color: #3f5263;
  font-weight: bold;
}
/deep/.el-card__body {
  padding: 10px !important;
}
.form_titel {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}
.box-item {
  width: 200px;
  display: flex;
}
.box-item-text {
  margin-right: 20px;
}
.box-row {
  flex: 1;
  line-height: 30px;
  display: flex;
  flex-direction: column;
  border-right: 1px dotted #aaaaaa;
  align-items: center;
}
.box-mian {
  /* padding: 0 30px; */
  display: flex;
  /* justify-content: space-between; */
}
.box-item-but {
  display: flex;
  justify-content: center;
}
.box_right {
  display: flex;
  width: 100%;
}
.box_row_left {
  flex: 2;
  background-color: #133864;
  color: #fff;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box_row_left_text {
  width: 80px;
}
.box_row_right {
  flex: 4;
  background-color: #324877;
  color: #fff;
  padding: 5px;
}
.box_but_row {
  background-color: #e1eff0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #000;
}
.cet_img {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cet_img > img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.box_cent_row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.cet_text_row {
  margin-left: 10px;
}
.cet_row_titel {
  font-weight: bold;
  font-size: 18px;
}
.cet_row_text {
  font-size: 15px;
  color: #acacac;
}
</style>